<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>boost 搜索引擎</title>
</head>

<style>
    /* 去掉网页中所有的默认的内外边距 */
    * {
        /* 外边距 */
        margin: 0;
        /* 内边距 */
        padding: 0;
    }

    /* 将body内容和html 100%吻合 */
    html,
    body {
        height: 100%;
    }

    /* 类选择器container */
    .container {
        /* 设置div宽度 */
        width: 800px;
        /* 设置外边距居中对齐 */
        margin: 0px auto;
        /* 设置外边距的上边距 */
        margin-top: 15px;
    }

    .container .search {
        /* 宽度与父标签一致 */
        width: 100%;
        /* 高度 */
        height: 52px;
    }

    /* 先选中标签input，再设置标签属性，input：标签选择器*/
    .container .search input {
        /* 设置左浮动，相当于输入框靠左 */
        float: left;
        width: 600px;
        height: 50px;
        /* 设置边框属性：边框的宽度，样式，颜色 */
        border: 1px solid black;
        /* 去掉input输入框的右边框 */
        border-right: none;
        /* 设置内边距，默认文字不要和左侧边框紧挨着 */
        padding-left: 10px;
        /* 设置input内部的字体的颜色和样式 */
        color: rgb(0, 0, 0);
        font-size: 15px;
    }

    /* 先选中button标签，设置标签的属性，button：标签选择器*/
    .container .search button {
        /* 设置left浮动 */
        float: left;
        width: 150px;
        height: 52px;
        /* 设置button的背景颜色，#4e6ef2 */
        background-color: #4e6ef2;
        /* 设置button中的字体颜色 */
        color: #FFF;
        /* 设置字体的大小 */
        font-size: 19px;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .container .result {
        width: 100%;
    }

    .container .result .item {
        margin-top: 15px;
    }

    .container .result .item a {
        /* 设置标题为块级元素，单独占一行 */
        display: block;
        /* 去掉a标签的下划线 */
        text-decoration: none;
        /* 设置a标签中的文字的字体大小 */
        font-size: 20px;
        /* 设置字体的颜色 */
        color: #4e6ef2;
    }

    .container .result .item a:hover {
        /*设置鼠标放在标题a之上的动态效果：显示下划线 */
        text-decoration: underline;
    }

    /* 设置摘要的上边距，字体大小，字体 */
    .container .result .item p {
        margin-top: 5px;
        font-size: 16px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
 Unicode', Geneva, Verdana, sans-serif;

    }

    /* 设置网址独占一行，设置字体风格，字体颜色 */
    .container .result .item i {
        /* 设置为块级元素，单独占一行 */
        display: block;
        /* 取消斜体风格 */
        font-style: normal;
        color: green;
    }
</style>

<body>
    <div class="container">
        <div class="search">
            <input type="text" value="输入搜索关键字">
            <button onclick="Search()">搜索一下</button>
        </div>
        <div class="result">
            <!-- <div class="item">
                <a href="#">这是标题</a>
                <p>这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要</p>
                <i>https://www.baidu.com</i>
            </div>
            <div class="item">
                <a href="#">这是标题</a>
                <p>这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要 这是摘要</p>
                <i>https://www.baidu.com</i>
            </div> -->
        </div>
    </div>
    <script>
        function Search() {
            //浏览器弹出框
            // alert("hello js!");
            // 1、提取数据,$可以理解是JQuery的别称
            let query = $(".container .search input").val();
            console.log("query = " + query);//输出在网页控制台
            // 2.发起http请求，ajax是一个前后端交互的函数
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                success: function (data) {
                    console.log(data);
                    BuildHtml(data);
                }
            });

            function BuildHtml(data) {
                //获取html的result标签
                let result_lable = $(".container .result");
                //清空历史搜索结果
                result_lable.empty();
                for (let elem of data) {
                    // console.log(elem.title);
                    // console.log(elem.desc);
                    // console.log(elem.url);
                    let a_lable = $("<a>", {
                        text: elem.title,
                        href: elem.url,// <a> 标签的 href 属性用于指定超链接目标的 URL
                        //跳转到新的页面
                        target: "_blank"//<a> 标签的 target 属性规定在何处打开链接文档
                    });
                    let p_label = $("<p>", {
                        text: elem.desc
                    });
                    let i_lable = $("<i>", {
                        text: elem.url
                    });
                    let div_lable = $("<div>", {
                        class: "item"
                    })
                    //将标签添加到item中
                    a_lable.appendTo(div_lable);
                    p_label.appendTo(div_lable);
                    i_lable.appendTo(div_lable);
                    //将每个item添加到result_lable中
                    div_lable.appendTo(result_lable);
                }
            }
        }
        /* 当键盘按下判断当前的按键是不是 回车，如果是就搜索 */
        window.onkeydown = function (event) {
            /* 解决兼容性问题 */
            event = event || window.event;

            if (event.keyCode == 13) {//当按下回车键
                Search();
            }
        };
    </script>
</body>

</html>